
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="../jquery-2.1.1.js"></script>
	<title></title>
</head>
<body>

<div id="clickme">
  Click here
</div>
<img id="book"  alt="" width="100" height="123"
  style="background:red;opacity:1;position: relative; left: 500px;" />

<script type="text/javascript">
	

	// $('#clickme').click(function() {

var book = document.getElementById('book')


// animate(book, {
// 	left: 50,
// 	duration: 2000
// })

function animate(elem, options){
	var initValue = getStyleVlaue(elem,"left")
	//动画初始值
	var start = parseFloat(initValue);
	//动画结束值
	var end = options.left
	//动画id
	var timerId;
	var createTime = function(){
		return  (+new Date)
	}
	//动画开始时间
	var startTime = createTime();

	function tick(){	
		//每次变化的时间
		var remaining = Math.max(0, startTime + options.duration - createTime())
		var temp = remaining / options.duration || 0;
		var percent = 1 - temp;
		console.log( percent )

		if(remaining){
	//	console.log( remaining  )
		}else{
			//停止动画
			clearInterval(timerId);
			timerId = null;
		}
	}

	//开始执行动画
	var timerId = setInterval(tick, 13);
}


//获取样式属性年
function getStyleVlaue(elem,name) {
	var computed=  elem.ownerDocument.defaultView.getComputedStyle(elem, null);
	return  computed.getPropertyValue(name) || computed[name];
};


function animate1(elem, options) {

	var animation = {};

	var tick = function(){

	}

	tick.elem = elem

	tick.anim = animation

	animate.fx.timer(tick);
}


//保存需要执行的动画对象
animate.timers = [];


//开始执行动画
animate.fx = {
	timer : function(timer) {
		animate.timers.push(timer);
		if (timer()) {
			animate.fx.start();
		} else {
			animate.timers.pop();
		}
	}
}




</script>
</body>
</html>